<div class="form-group bg-info text-white p-2">
  <label>Category</label>
  <select [(ngModel)]="highlightCategory" class="form-control">
      <option value="">None</option>
      <option *ngFor="let category of categories">
          {{category}}
      </option>
  </select>
</div>
<table class="table table-sm table-bordered table-striped">
  <tr>
      <th>ID</th><th>Name</th><th>Category</th><th>Price</th><th></th>
  </tr>
  <tr *ngFor="let item of getProducts()"
          [@rowHighlight]="getRowState(item.category)">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.category}}</td>
      <td>{{item.price | currency:"USD" }}</td>
      <td class="text-center">
          <button class="btn btn-danger btn-sm mr-1"
                  (click)="deleteProduct(item.id)">
              Delete
          </button>
          <button class="btn btn-warning btn-sm"
              [routerLink]="['/form', 'edit', item.id]">
              Edit
          </button>
      </td>
  </tr>
</table>
<div class="p-2 text-center">
  <button class="btn btn-primary m-1" routerLink="/form/create">
      Create New Product
  </button>
</div>
